<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
	   <script language="javascript" type="text/javascript" src="/functions.js"></script>
     <script language="javascript">

      function send_command(cmd) 
      {
        document.getElementById('hints').firstChild.nodeValue = "Send command: " + cmd;
        AJAX_get('/?action=command&command='+ cmd)
      }

      function AJAX_response(text) 
      {
        document.getElementById('hints').firstChild.nodeValue = "Got response: " + text;
      }

      function KeyDown(ev)
      {
        ev = ev || window.event;
        pressed = ev.which || ev.keyCode;

        switch (pressed) 
        {
	          case 37:
	              send_command('pan_plus');
	            break;
	          case 39:
	              send_command('pan_minus');
	            break;
	          case 38:
	              send_command('tilt_minus');
	            break;
	          case 40:
	              send_command('tilt_plus');
	            break;
	          case 32:
	              send_command('reset_pan_tilt');
	          break;
	          default:
	              break;
        }
      }

      document.onkeydown = KeyDown;

    </script>
    
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
	<title>title</title>
	<link href="css/style.css" rel="stylesheet" type="text/css" />
</head>

<body>
<div class="wrap960 relative">
	<div class="absolute" style="top:50px; left:20px; width:480px;">
		<img src="jpeg-stream" width="480px" height="320px" />
	</div>
	<div class="absolute" style="top:50px; left:520px; width:400px;">
		<!-- 4 buttons: leftup, rightup, leftdown, rightdown  -->
		<button class="btn" style="background-image:url('img/imgdown.jpg'); width:30px;height:30px; top:0px; left:0px;" onclick="send_command('upcamera')"></button>
		<button class="btn" style="background-image:url('img/imgup.jpg');   width:30px;height:30px; top:0px; left:350px;" onclick="send_command('downcamera')"></button>
		<button class="btn" style="background-image:url('img/imgleft.jpg'); width:55px;height:55px; top:295px; left:0px;" onclick="send_command('turnleft')"></button>
		<button class="btn" style="background-image:url('img/imgright.jpg');width:55px;height:51px; top:295px; left:350px;" onclick="send_command('turnright')"></button>
		
		<!-- the one in the middle -->
		<button class="btn" style="background-image:url('img/imgstart.jpg');width:75px;height:72px; top:120px; left:155px;"onclick="send_command('start')"></button>
		
		<!-- 8 buttons around the middle one: start from left, arranging clock-wise -->
		<button class="btn" style="background-image:url('img/img7.jpg'); width:47px;height:47px; top:140px; left:55px;"onclick="send_command('godir7')"></button>
		<button class="btn" style="background-image:url('img/img8.jpg'); width:47px;height:47px; top:90px; left:90px;"onclick="send_command('godir8')"></button>
		<button class="btn" style="background-image:url('img/img1.jpg'); width:47px;height:47px; top:60px; left:175px;"onclick="send_command('godir1')"></button>
		<button class="btn" style="background-image:url('img/img2.jpg'); width:47px;height:47px; top:90px; left:260px;"onclick="send_command('godir2')"></button>
		<button class="btn" style="background-image:url('img/img3.jpg'); width:47px;height:47px; top:140px; left:295px;"onclick="send_command('godir3')"></button>
		<button class="btn" style="background-image:url('img/img4.jpg'); width:47px;height:47px; top:190px; left:260px;"onclick="send_command('godir4')"></button>
		<button class="btn" style="background-image:url('img/img5.jpg'); width:47px;height:47px; top:220px; left:175px;"onclick="send_command('godir5')"></button>
		<button class="btn" style="background-image:url('img/img6.jpg'); width:47px;height:47px; top:190px; left:90px;"onclick="send_command('godir6')"></button>
		
	</div>
</div>

<!-- for command test -->
 <div id="hints" style="background-color: yellow; position: absolute; top: 2px">communication hints</div>

</body>
</html>